.container{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 400px;
    padding: 15px;
   .user {
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        border: 1px solid #ddd;
        border-bottom: 0;
        padding: 1rem 1.5rem;
        .img {
            height: 90px;
            width: 80px;
            float: left;
            img{
                height: 80px;
                width: 80px;
                border-radius: 50%;
            };
           }
        .info {
              float: left;
                width: calc(100%-80px);
                padding-left: 10px;
                -webkit-box-pack: justify;
                -webkit-justify-content: space-between;
                -ms-flex-pack: justify;
                justify-content: space-between;
                line-height: 80px;
                .title{
                    float: left;                  
                }
                .box{
                    float: right;
                    a{
                       display: block;
                       width: 50px;
                       text-align: center;
                       &:before {
                           overflow: hidden;
                           position: absolute;
                            opacity: 0;
                            width: 40px;
                            height: 18px;
                            line-height: 18px;
                            margin-top: -10px; 
                            margin-left: -10px;
                            text-align: center;
                            z-index: 0;
                            background: rgba(51, 51, 51, 0.75);
                            color: #fff;
                            padding: 5px;
                            border-radius: 2px;
                            -webkit-transition: 300ms ease;
                            transition: 300ms ease;
                            -webkit-transform: translateY(0);
                            transform: translateY(0);
                        }
                         i {
                             font-size: 30px;
                             line-height: 30px;
                             font-family: arial;
                             z-index: 5;
                             color: #c5c5c5;
                        }
                        &.like{
                            color: #FFA07A;
                             &:before {
                               content: 'Like';
                               }
                            i{
                              color: #FFA07A;
                            }
                            &:hover{
                                &:before{
                                    opacity: 1;
                                }
                            }
                        }
                        &.love {
                            color: #FF7F50;
                             &:before {
                               content: 'Love';
                               }
                            i{
                               color: #FF7F50;
                            }
                             &:hover{
                                &:before{
                                    opacity: 1;
                                }
                            }
                        }
                         &.stalker {
                            color: #FF4500;
                            &:before {
                               content: 'Love+1';
                               }
                            i{
                               color: #FF4500;
                            }
                             &:hover{
                                &:before{
                                    opacity: 1;
                                }
                            }
                        }
                    }
                }
            }
    }
}
